<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{isHot?'热呀':'冷呀'}}</h1>
        <button @click="isHot=!isHot">改变天气</button>
        <br>
        {{count}}

    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    isHot: true,
                    count: 0
                }
            },
        })

        /* 
           在vue实例vm上有一个$watch方法 也可以处理对vm实例上的属性进行监听
           参数1:被监听的属性
           参数2:回调函数
           参数3:配置对象  deep immediate
         */
        vm.$watch(
            'isHot',
            () => {
                console.log('监听到更新了');
            }, {
                immediate: true
            }
        )
        vm.$watch(
            "count",
            () => {
                console.log("监听有更新了1");
            }, {
                immediate: true,
            }
        );
    </script>
</body>

</html>